<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>登录</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="css/mui.min.css"/>
<link rel="stylesheet" href="css/style.css"/><!--自定义样式-->
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/common.js"></script><!--自定义脚本-->
<script type="text/javascript">
url = 'https://www.zhouchun.net';
function test01()
{
    mui.openWindow({
      url: 'user.html',
      id: url,
      styles: {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
        titleNView: {                       // 窗口的标题栏控件
          type:'default',
          titleText:"标题栏",                // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
          titleColor:"#000000",             // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
          titleSize:"17px",                 // 字体大小,默认17px
          backgroundColor:"#F7F7F7",        // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
          progress:{                        // 标题栏控件的进度条样式
            color:"#00FF00",                // 进度条颜色,默认值为"#00FF00"
            height:"2px"                    // 进度条高度,默认值为"2px"
          },
          splitLine:{                       // 标题栏控件的底部分割线，类似borderBottom
            color:"#CCCCCC",                // 分割线颜色,默认值为"#CCCCCC"
            height:"1px"                    // 分割线高度,默认值为"2px"
        },
        autoBackButton:true
        }
      }
    });
}
function test02()
{
    mui.openWindow({
      url: url,
      id: url,
      styles: {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
        titleNView: {                       // 窗口的标题栏控件
          type:'transparent',
          titleText:"标题栏",                // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
          titleColor:"#000000",             // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
          titleSize:"17px",                 // 字体大小,默认17px
          backgroundColor:"#F7F7F7",        // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
          progress:{                        // 标题栏控件的进度条样式
            color:"#00FF00",                // 进度条颜色,默认值为"#00FF00"
            height:"2px"                    // 进度条高度,默认值为"2px"
          },
          splitLine:{                       // 标题栏控件的底部分割线，类似borderBottom
            color:"#CCCCCC",                // 分割线颜色,默认值为"#CCCCCC"
            height:"1px"                    // 分割线高度,默认值为"2px"
        }
        }
      }
    });
}
</script>
</head>
<body>
<div class="mui-content">
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" xonclick="test01()" id="test01">测试01</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" xonclick="test02()" id="test02">测试02</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test03()">测试03</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test04()">测试04</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test05()">测试05</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test06()">测试06</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test07()">测试07</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test08()">测试08</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test09()">测试09</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="test10()">测试10</button>
</div>
<script type="text/javascript">
mui.init();
document.getElementById("test01").addEventListener("tap", function(){test01();});
document.getElementById("test02").addEventListener("tap", function(){test02();});
</script>
</body>
</html>
